<template>
  <view class="button-box">
    <!--    <view>
      <canvas id="canvas" type="2d" style="width: 100px; height: 100px;"></canvas>
    </view>-->

    <view @click="gotoPj1002">
      <text>课程评价 </text>
      <uni-icons type="calendar" size="18"></uni-icons>
    </view>
    <view>
      <text>专业评价 </text>
      <uni-icons type="wallet" size="18"></uni-icons>
    </view>
    <view>
      <text>模块评价 </text>
      <uni-icons type="compose" size="18"></uni-icons>
    </view>

  </view>

</template>

<script>
  // import lottie from 'lottie-miniprogram'
  export default {
    data() {
      return {

      };
    },
    onReady() {
      // 主要差异点：
      // 微信中使用的是wx.createSelectorQuery()
      // uni-app中使用的是uni.createSelectorQuery()
      // uni.createSelectorQuery().select('#canvas').node(res => {
      //   const canvas = res.node
      //   const context = canvas.getContext('2d')
      //   lottie.setup(canvas)
      //   lottie.loadAnimation({
      //     rendererSettings: {
      //       context,
      //     },
      //     loop: true,
      //     autoplay: true,
      //     animationData: require('../../static/lottie/data.json')
      //     // path: 'https://xxxx/dataSVG.json'
      //   })
      // }).exec()
    },
    methods: {
      gotoPj1002() {
        uni.navigateTo({
          url: '../../packagepj/pages/pj1002/pj1002'
        })
      }
    }
  }
</script>

<style lang="scss">
  .button-box {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300;
    height: 500px;
    // text{
    //   font-size: ;
    // }

    view {
      width: 210px;
      height: 60px;
      font-size: 18px;
      text-align: center;
      line-height: 60px;
      margin-bottom: 60px;
      border-radius: 10px;
      // border: 1px solid #c00000;
      // box-shadow: "10px 10px 5px #888888;"
      // border-radius: 5px;
      box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.1);
    }
  }
</style>
